<template>
  <div>
    <van-nav-bar
      title="详情"
      left-text="返回"
      left-arrow
      @click-left="
        () => {
          $router.back('/sousuo');
        }
      "
      fixed
    />
    
    <div style="margin-top: 25px"></div>

    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image">
        <img :src="image" />
      </van-swipe-item>
    </van-swipe>

    <!-- 富文本 -->
    <div v-html="xiangqingdata.goods_introduce"></div>

    <!-- 动作栏 -->
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-action-bar-icon icon="cart-o" text="购物车" />
      <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
      <van-action-bar-button
        type="warning"
        text="加入购物车"
        @click="addCart"
      />
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { showToast } from "vant";
let route = new useRoute();
let router = new useRouter();
let images = ref([]);
let xiangqingdata = ref({});
import { xiangqingApi } from "@/api/api";
xiangqingApi(route.params.goods_id).then((res) => {
  xiangqingdata.value = res.data.message;
  for (let i = 0; i < res.data.message.pics.length; i++) {
    images.value.push(res.data.message.pics[i].pics_mid);
  }
});

import { useCounterStore } from "@/store/ceat";

const store = useCounterStore();

const addCart = () => {
  // 拿token
  let token = localStorage.getItem("token");
  // 判断token是否存在
  if (!token) {
    showToast({
      type: "fail",
      message: "请先登录",
      onClose() {
        // 关闭后跳转到登录页面
        router.push("/login");
      },
    });
  } else {
    // 详情的数据 增加到购物车里
    store.addCeat(xiangqingdata.value, route.params.goods_id);
    // 登录成功后跳转到购物车页面

    router.push("/home/ceat");
  }
};
</script>

<style lang="scss" scoped>
</style>